<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0 auto;
			}
			#box1{
				width: 300px;
				height: 300px;
				background-color: #00FFFF;
			}
			#box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			#box3{
				width: 150px;
				height: 150px;
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
		<script type="text/javascript">
			/*
				分别为三个div绑定响应函数
			*/
		   var box1 = document.getElementById("box1");
		   var box2 = document.getElementById("box2");
		   var box3 = document.getElementById("box3");
		   
		   bind(box1 , "click" ,function(){
			   alert("box1")
		   })
		   bind(box2 , "click", function(){
		   		alert("box2")
		   })
		   bind(box3 , "click", function(){
		   		alert("box3")
		   })
		   function bind( obj , eventStr , callback ){
		   			   // alert(1);
		   				if(obj.addEventListener){
		   				//大部分浏览器的兼容方式
		   					obj.addEventListener(eventStr , callback , false);
		   				}else{
		   				//IE8及以下的
		   				//call方式可以修改this的值
		   					obj.attachEvent("on"+eventStr , function(){
		   						// 在匿名函数中调用回调函数
		   						callback.call(obj);
		   					});
		   				}
		   }
		   /*
				事件的传播
					-关于事件的传播网景公司和微软公司有不同的理解
					-微软公司认为事件的传播应该由内向外出阿伯，也就是事件触发时，应该先触发的是当前元素上的事件
						然后在向当前元素的祖先元素上传播，也就是说事件应该在冒泡阶段执行
					-网景公司认识事件应该是由外向内传播的，也就是当事件触发时应该先触发当前元素的最外层的祖先元素事件
						然后在向内传播给后代元素
					-w3c综合了两个公司的方案，将事件的传播分成了三个阶段
						1.捕获阶段
							-在捕获阶段时在外层元素会向目标元素进行事件捕获，但是默认此事件不会触发
						2.目标阶段
							-事件捕获到目标元素，捕获结束开始在目标元素上触发事件
						3.冒泡阶段
							-事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
						-如果希望在捕获阶段就触发事件可以将addEventListener()的第三次参数设置为true
							一般情况下我们不会在捕获阶段触发事件，所以这个参数一般都是false
						-ie8及以下浏览器没有捕获阶段	
		   */
		</script>
	</body>
</html>
